<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../../../node_modules/element-ui/lib/index.js"></script>


    <!-- 自定义 -->
    <script src="../../../node_modules/mockjs/dist/mock.js"></script>
    <script src="../static/js/mock_config.js"></script>
    <script src="../static/js/index.js"></script>

    <!-- PC -->
    <link rel="stylesheet" href="../static/css/Machine.css">
</head>

<body>
    <!--主体-->
    <div class="main clearfix" id="app">

        <div class="header">
            <header>
                <div class="navbar">
                    <div class="card_T">
                        <div class="card" style="width:16rem;background-color:#0b87fa;color: white;">
                            <ul class="header-text">
                                <li>
                                    <h8 style="line-height: 78px;">设备看板</h8>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="pc_content">
                        <div class="card" style="width:13rem;background-color: #33814e;margin-left: 2rem;">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>设备总数 {{defaultDt1.length}} 单</h4>
                                </li>
                            </ul>
                        </div>
                        <div class="card" style="width:13rem;background-color: #33814e;margin-left: 2rem;">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>开机中 单</h4>
                                </li>
                            </ul>
                        </div>
                        <div class="card" style="width:13rem;background-color: #33814e;margin-left: 2rem;">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>待机中 单</h4>
                                </li>
                            </ul>
                        </div>
                        <div class="card" style="width:13rem;background-color: #33814e;margin-left: 2rem;margin-right: 1.5rem;">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>维修中 单</h4>
                                </li>
                            </ul>
                        </div>
                        <div class="card" style="width:13rem;background-color: #33814e;margin-right: 1rem;">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>保养中 单</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </header>
        </div>

        <div class="main-left">
            <div class="border-container">
                <div>
                    <el-table :data="defaultDt1" :default-sort="{prop: 'date', order: 'descending'}" ref="defaultDt1" :height=el_table_height>
                        <el-table-column prop="FactoryCode" label="机台编号">
                        </el-table-column>
                        <el-table-column prop="AsEqName" label="机台名称">
                        </el-table-column>
                        <el-table-column prop="amount1" label="序号">
                        </el-table-column>
                        <el-table-column prop="GoodsCode" label="产品编号">
                        </el-table-column>
                        <el-table-column prop="GoodsName" label="产品名称">
                        </el-table-column>
                        <el-table-column prop="Model" label="规格型号">
                        </el-table-column>
                        <el-table-column prop="UnitName" label="单位">
                        </el-table-column>
                        <el-table-column prop="amount2" label="小时产量">
                        </el-table-column>
                        <el-table-column prop="PATaskQty" label="任务数量">
                        </el-table-column>
                        <el-table-column prop="PlanTime" label="预计时长">
                        </el-table-column>
                        <el-table-column prop="BeginPrtDate" label="生产日期">
                        </el-table-column>
                        <el-table-column prop="EndPrtDate" label="生产交期">
                        </el-table-column>
                        <el-table-column prop="Completed" label="完工数量">
                        </el-table-column>
                    </el-table>
                </div>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
        </div>
    </div>

</body>



<script>
    new Vue({
        el: '#app',
        data() {
            return {
                el_table_height: 800,
                defaultDt1: []
            }
        },
        methods: {
            arraySpanMethod({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                if (rowIndex % 2 === 0) {
                    if (columnIndex === 0) {
                        return [1, 2];
                    } else if (columnIndex === 1) {
                        return [0, 0];
                    }
                }
            },

            objectSpanMethod({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                if (columnIndex === 0) {
                    if (rowIndex % 2 === 0) {
                        return {
                            rowspan: 2,
                            colspan: 1
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            },
            GetTabelDate(that) {
                // 订单出货
                GetCodeData("VB21080609524993", "Get", "OrderOut").then(function(res) {
                    that.defaultDt1 = res.rows
                })
            },
        },

        mounted() {
            TableAotoRoll([this.$refs.defaultDt1])
            var that = this
            setTimeout(function() {
                that.GetTabelDate(that)
            }, 0);
            setInterval(function() {
                that.GetTabelDate(that)
            }, 1000 * 60);
        }
    })
</script>



</html>